<template>
  <div class="auth_container">
    <el-input disabled :value="$route.query.roleName"></el-input>
    <el-tree 
      style="margin: 20px 0"
      ref="tree"
      :data="allPermissions" 
      node-key="id"  
      show-checkbox 
      default-expand-all
      :props="defaultProps" 
    />
    <el-button :loading="loading" type="primary" @click="save" size="small">保存</el-button>
    <el-button @click="$router.replace({name: 'Role'})" size="small">取消</el-button>

  <el-button @click="getCheckedNodes" size="small">通过 node 获取选中节点</el-button>
  <el-button @click="getCheckedKeys" size="small">通过 key 获取选中节点</el-button>
  <el-button @click="setCheckedNodes" size="small">通过 node 设置选中</el-button>
  <el-button @click="setCheckedKeys(checkedIds)" size="small">通过 key 设置选中</el-button>
  <el-button @click="resetChecked" size="small">清空</el-button>
  </div>
</template>
<script>

  export default {
    name: 'roleAuth',

    data() {
      return {
        loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
        allPermissions: [], // 所有
        //测试，临时存储后台返回的数据中选中的key值
        checkedIds:[],
        defaultProps: {
          //指定子树为节点对象的属性值--children
          children: 'children',
          //指定节点标签为节点对象的属性值--name
          label: 'name'
        },
      };
    },
    //发请求一般情况下，我们都是在mounted去发，但是也可以在created内部去
    created() {
      this.init()
    },
    methods: {
      /* 
      初始化
      */
      init() {
        //route中params参数--角色id传过来
        const roleId = this.$route.params.id
        this.getPermissions(roleId)
      },

      /* 
      获取指定角色的权限列表
      */
      async getPermissions(roleId) {
          const result = await this.$API.permission.toAssign(roleId)
          if(result.code == 20000 || result.code ==200){
               const allPermissions = result.data.children
               this.allPermissions = allPermissions
               this.checkedIds = this.getCheckedIds(allPermissions)
               this.setCheckedKeys(this.checkedIds)
          }
      },
      /* 测试 */
      //1.通过node获取选中节点
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      //2.通过key获取选中节点
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      //3.通过node来设置节点的选中状态
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([]);
      },
      //4.通过key来设置节点的选中状态--必须设置node-key，本组件设置node-key="id"  
      setCheckedKeys(element) {
        //需要拿到id值
        this.$refs.tree.setCheckedKeys(element);
      },
      //清空选择
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },


      /* 
      得到所有选中的id列表 
      ---重点（
      1. reduce方法：将数组的值减为单个值（从左到右）。 用法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
      2. 函数自调用--递归调用
      ）
      */
      getCheckedIds (auths, initArr = []) {
        // pre值，初始值，或函数先前返回的值
        // item值，当前元素的值
        return auths.reduce((pre, item) => {
          //判断是否选中，只需要管理最后子节点id的元素是否选中
          if (item.select && item.level===4) {
            pre.push(item.id)
          } else if (item.children) {
            //递归调用，执行完所有层级的数据
            this.getCheckedIds(item.children, initArr)
          }
          return pre
        }, initArr)
      },

      /* 
      保存权限列表
      */
      async save() {
          var ids = this.$refs.tree.getCheckedKeys().join(",")
          this.loading = true
          const result = await  this.$API.permission.doAssign(this.$route.params.id,ids)
          if(result.code == 20000 ||result.code == 200){
            this.loading = false
            this.$message.success('分配权限成功')
            // 必须在跳转前获取(跳转后通过this获取不到正确的数据了)
            const roleName = this.$route.query.roleName   //修改的角色权限
            const roles = this.$store.getters.roles     //获取当前登录用户的角色数组
            this.$router.replace({
                 path:'/acl/role/list'
            },()=>{
               console.log('replace onComplete',roleName,roles)
              // 跳转成功后, 判断如果更新角色权限的是当前用户包含对应的角色, 重新加载页面以获得最新的数据
              if (roles.includes(roleName)) {
                window.location.reload()
              }
            })
          }
      }
    }
  };
</script>

<style scoped>
    .auth_container{
        margin: 10px 0px;
    }
</style>